<template>
	<!-- pages/merchant_center/coupon_manage/index -->
	<view class="couponList-manage">
		<!-- 类型筛选 -->
		<view class="type-filtering">
			<u-dropdown>
				<u-dropdown-item v-model="couponType" title="优惠券类型" :options="couponTypeList"
					@change="couponTypeChange"></u-dropdown-item>
			</u-dropdown>
		</view>

		<!-- 优惠券列表 -->
		<view class="couponList-box">
						<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :auto="false" :down="{
					auto: false
				}" bottom="50" :up="{
					textNoMore: '没有更多了'
				}">
				<view class=""  v-for="(item, index) in couponList" :key="index">
											<CouponItem :couponItemData="item" />
				</view>

				</mescroll-body>
		<!-- 	<up-list @scrolltolower="scrolltolower">
				<up-list-item  v-for="(item, index) in couponList" :key="index">
					<CouponItem :couponItemData="item" />
				</up-list-item>
			</up-list>
			<u-loadmore :status="loadingInfo.status" :icon-type="flower" :load-text="loadingInfo.loadingText" /> -->
		</view>

		<!-- 添加优惠券操作 -->
		<view class="coupon-operate" @click="addCouponEvent">
			<u-icon name="plus-circle" color="#ff4110" size="20"></u-icon>
			<text class="operate-txt">添加优惠券</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import API from '@/api/index.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import CouponItem from './coupon_item/index.vue'
	// 模拟数据
	const couponListData = [{
			state: 1, //0失效 
			name: '优惠券名称优惠券名称',
			startTime: '2024-10-17',
			endTime: '2024-12-31',
			audit: 0, //0未审核
			cardDisc: '8.6', //优惠折扣
			fullAmount: '', //满减金额
			isoli: 0, // 是否可参与油品券
			isDeduction: 0, // 是否可参与油币抵扣
			companyId: 'xxx加油站地址xxxx', //油站信息
		},
		{
			state: 0, //0失效 
			name: '优惠券名称优惠券名称',
			startTime: '2024-10-17',
			endTime: '2024-12-31',
			audit: 1, //0未审核
			cardDisc: '', //优惠折扣
			fullAmount: '300', //满减金额
			isoli: 0, // 是否可参与油品券
			isDeduction: 1, // 是否可参与油币抵扣
			companyId: 'xxx加油站地址xxxx', //油站信息
		},
		{
			state: 0, //0失效 
			name: '优惠券名称优惠券名称',
			startTime: '2024-10-17',
			endTime: '2024-12-31',
			audit: 1, //0未审核
			cardDisc: '8.6', //优惠折扣
			fullAmount: '', //满减金额
			isoli: 1, // 是否可参与油品券
			isDeduction: 1, // 是否可参与油币抵扣
			companyId: 'xxx加油站地址xxxx', //油站信息
		},
		{
			state: 0, //0失效 
			name: '优惠券名称优惠券名称',
			startTime: '2024-10-17',
			endTime: '2024-12-31',
			audit: 1, //0未审核
			cardDisc: '', //优惠折扣
			fullAmount: '600', //满减金额
			isoli: 0, // 是否可参与油品券
			isDeduction: 1, // 是否可参与油币抵扣
			companyId: 'xxx加油站地址xxxx', //油站信息
		},
		{
			state: 0, //0失效 
			name: '优惠券名称优惠券名称',
			startTime: '2024-10-17',
			endTime: '2024-12-31',
			audit: 1, //0未审核
			cardDisc: '8.6', //优惠折扣
			fullAmount: '', //满减金额
			isoli: 0, // 是否可参与油品券
			isDeduction: 1, // 是否可参与油币抵扣
			companyId: 'xxx加油站地址xxxx', //油站信息
		},
		{
			state: 0, //0失效 
			name: '优惠券名称优惠券名称',
			startTime: '2024-10-17',
			endTime: '2024-12-31',
			audit: 0, //0未审核
			cardDisc: '8.6', //优惠折扣
			fullAmount: '', //满减金额
			isoli: 0, // 是否可参与油品券
			isDeduction: 1, // 是否可参与油币抵扣
			companyId: 'xxx加油站地址xxxx', //油站信息
		},
	]
	const couponTypeListData = [{
			label: '加油站',
			value: 0
		},
		{
			label: '商城',
			value: 1
		},
	]

	// 优惠券列表
	const couponList = ref(couponListData)

	// 优惠券类型
	const couponType = ref(0)

	// 优惠券类型数据
	const couponTypeList = ref(couponTypeListData)

	// 加载状态
	// const loadingInfo = ref({
	// 	status: 'loading',
	// 	loadingText: '努力加载中'
	// })

	/**
	 * 初始加载
	 */
	onLoad(() => {
		// loadmore();
	});

	/**
	 * 底部加载数据
	 */
	// const scrolltolower = () => {
	// 	loadmore();
	// };

	/**
	 * 异步获取数据
	 */
	// const loadmore = () => {
	// 	// 获取数据

	// 	// 如果数据加载完
	// 	loadingInfo.value.status = 'nomore'
	// 	loadingInfo.value.loadingText = '没有更多了'

	// };

	/**
	 * 上拉刷新回调以及下拉加载回调
	 * @mescroll 
	 */
	const upCallback = async (mescroll) => {
		const couponListRes = await API.getCouponList({
			page: mescroll.num,
			size: mescroll.size
		});
		const curPageData = couponListRes.data.rows || []; // 当前页数据
		if (mescroll.num == 1) couponList.value = []; // 第一页需手动制空列表
		couponList.value = couponList.value.concat(curPageData); //追加新数据
		mescroll.endBySize(curPageData.length, couponListRes.data.total);
	};

	/**
	 * 优惠类型
	 * @val
	 */
	const couponTypeChange = (val) => {}

	/**
	 * 添加优惠券
	 */
	const addCouponEvent = () => {
		uni.navigateTo({
			url: '/pages/merchant_center/coupon_add/index'
		})
	}
</script>

<style lang="scss">
	.couponList-manage {
		width: 100%;

		.type-filtering {
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
			box-shadow: 0px 0px 10rpx gray;

			:deep(.u-dropdown__menu__item) {
				justify-content: flex-start;
			}
		}

		.couponList-box {
			width: 100%;
			height: 1030rpx;
			margin-top: 20rpx;
			overflow-y: scroll;
		}

		.coupon-operate {
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100rpx;
			box-shadow: 0px 0px 10rpx gray;

			.operate-txt {
				padding-left: 10rpx;
				line-height: 20rpx;
			}
		}
	}
</style>